<template>
  <div id="areaCode">
    <div class="fixed">
      <NavBar title="区号" />
    <form action="/">
      <Search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    </div>
    
    <div class="box">
      <div class="dataBox" v-for="(item,index) in 20" :key="index">
        <div class="letf">
          <div class="index">{{index}}</div>
          <div class="title">中国</div>
        </div>
        <div class="right">+86</div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/navbar'
import { Search } from 'vant'
export default {
  components: {
    NavBar,
    Search
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    onSearch(val) {
      console.log(val)
    },
    onCancel() {
      console.log('取消')
    }
  }
}
</script>

<style lang="less" scoped>
#areaCode {
  background-color: #f7f6fb;
  min-height: 100vh;
  .box {
    padding: 10px;
    margin-top: 100px;
    .dataBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      padding: 10px;
      border-radius: 10px;
      margin-bottom: 10px;
      .letf {
        display: flex;
        align-items: center;
        .index {
          border-radius: 100px;
          background-color: #007aff;
          color: #fff;
          width: 20px;
          line-height: 20px;
          text-align: center;
          margin-right: 15px;
        }
        .title {
          color: #000;
          font-weight: 800;
        }
      }
      .right{
        color: #303133;
      }
    }
  }
  .fixed{
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #f7f6fb;
  }
}
</style>
